<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认倒计时</dt>
    <dd class="pb20 d-f gap20">
      <t-countdown :time="1000*10" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="countdown1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">日期倒计时</dt>
    <dd class="pb20 d-f gap20">
      <t-countdown :end-time="Date.now() + 1000*60*3" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="countdown2"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">自定义格式化倒计时</dt>
    <dd class="pb20 d-f gap20">
      <t-countdown :time="1000*60*60*30" step="1" format="d 天 hh 小时 mm 分钟 ss 秒 ms 毫秒" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="countdown3"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">自定义样式</dt>
    <dd class="pb20 d-f gap20">
      <t-countdown :time="1000*60*60*25" step="1">
        <template #default="{ time }">
          <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
            {{ time.d }}天
          </span>
          <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
            {{ Number(time.hh) % 24 }}时
          </span>
          <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
            {{ time.mm }}分
          </span>
          <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
            {{ time.ss }}秒
          </span>
          <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
            {{ time.mss }}
          </span>
        </template>
      </t-countdown>
    </dd>
    <dd class="mt20">
      <pre v-highlight="countdown4"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
const countdown1 = `<t-countdown :time="1000*10" />`
const countdown2 = `<t-countdown :end-time="Date.now() + 1000*60*3" />`
const countdown3 = `<t-countdown :time="1000*60*60" step="1" format="hh 小时 mm 分钟 ss 秒 ms 毫秒" />`
const countdown4 = `<t-countdown :time="1000*60*60*25" step="1">
  <template #default="{ time }">
    <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
      {{ time.d }}天
    </span>
    <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
      {{ time.hh }}时
    </span>
    <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
      {{ time.mm }}分
    </span>
    <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
      {{ time.ss }}秒
    </span>
    <span style="display: inline-block;padding:20rem;background-color: #f60;color: #fff;margin-right: 20rem;">
      {{ time.mss }}
    </span>
  </template>
</t-countdown>`
</script>

<style scoped lang="scss">

</style>
